<template>
  <basic-container v-if="dialogVisible">
    <el-dialog :title="params.performanceName"
               :visible.sync="dialogVisible"
               append-to-body
               :width="width"
               :close-on-click-modal="false"
               :before-close="closeDialog">

      <el-form
        ref="form"
        :model="queryForm"
        label-width="120px"
        style="display: flex; flex-wrap: wrap"
      >
        <el-form-item style="width: 280px" label="媒体:">
          <el-select
            size="mini"
            v-model="queryForm.platform"
            placeholder="请选择"
            clearable
            @change="submitForm"
          >
            <el-option
              v-for="item in platformList"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 280px" label="国家/地区:">
          <el-select v-model="queryForm.nationList" size="mini" multiple clearable filterable placeholder="请选择"
                     @change="submitForm">
            <el-option
              v-for="(item,index) in nationList"
              :key="index"
              :label="item.dictValue"
              :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="更新时间:">
          <el-date-picker
            size="mini"
            v-model="queryForm.updateDateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="submitForm"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        @current-change="currentChange"
        @size-change="sizeChange"
        @on-load="onLoad"
        @sort-change="sortTableData"
      >
        <template slot-scope="{ row }" slot="ctr">
          <div>{{ row.ctr }}%</div>
        </template>
        <template slot-scope="{ row }" slot="cvr">
          <div>{{ row.cvr }}%</div>
        </template>
      </avue-crud>

    </el-dialog>
  </basic-container>
</template>

<script>
import {getSysDictList} from '@/api/system/dict';
import {findObject} from "@/util/util";
import {getCreativeDetailList} from "@/api/offer/creativeperformance";
import Moment from "moment";

export default {
  name: "creativePerformanceDetail",
  props: {
    width: String,
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      dialogVisible: false,
      params: {},
      platformList: [],
      nationList: [],

      queryForm: {
        platform: null,
        beginDate: null,
        endDate: null,
        nationList: [],
        updateDateRange: [],
      },
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      data: [],
      option: {
        calcHeight: 30,
        tip: false,
        border: true,
        index: false,
        selection: false,
        menu: false,
        menuLeft: false,
        refreshBtn: false,
        columnBtn: false,
        addBtn: false,
        dialogClickModal: false,
        column: [
          {
            label: "更新时间",
            prop: "reportDate",
          },
          {
            label: "媒体",
            prop: "platform",
            multiple: true,
            dataType: 'string',
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            searchMultiple: true,
          },
          {
            label: "国家/地区",
            prop: "country",
            dataType: 'string',
            multiple: true,
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey",
            },
          },
          {
            label: "花费",
            prop: "allExpend",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            // sortable: 'custom',
          },
          {
            label: "曝光",
            prop: "impressions",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            width: 120,
            // sortable: 'custom',
          },
          {
            label: "点击",
            prop: "clicks",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            // sortable: 'custom',
          },
          {
            label: "CTR",
            prop: "ctr",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            // sortable: 'custom',
          },
          {
            label: "安装",
            prop: "install",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            // sortable: 'custom',
          },
          {
            label: "CVR",
            prop: "cvr",
            rules: [
              {
                required: true,
                message: "请输入CVR",
                trigger: "blur",
              },
            ],
            // sortable: 'custom',
          },
        ],
      },
      // 排序
      sortList:[]
    }
  },
  created() {
    getSysDictList("platforms,nation").then(map => {
      this.platformList = map['platforms'];
      this.nationList = map['nation'];
      let column = findObject(this.option.column, 'platform', 'prop');
      if (column != null) {
        column.dicData = this.platformList;
      }
      column = findObject(this.option.column, 'country', 'prop');
      if (column != null) {
        column.dicData = this.nationList;
      }
    });
  },
  methods: {
    showDialog(params) {
      this.dialogVisible = true;
      this.params = {...params};
      this.buildSearch();
    },
    closeDialog() {
      this.dialogVisible = false;
      this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      }
    },

    buildSearch() {
      let query = {
        platform: this.queryForm.platform,
      };
      if (this.queryForm.updateDateRange != null && this.queryForm.updateDateRange.length == 2) {
        query.beginDate = this.queryForm.updateDateRange[0];
        query.endDate = this.queryForm.updateDateRange[1];
      }
      query.country = this.queryForm.nationList.join(',')
      this.query = query;
    },
    submitForm() {
      this.buildSearch();
      this.page.currentPage = 1;
      this.onLoad();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    onLoad() {
      this.loading = true;
      getCreativeDetailList(
        this.page.currentPage,
        this.page.pageSize,
        {
          creativeId: this.params.creativeId,
          sortList: JSON.stringify(this.sortList),
          ...this.query
        }).then((res) => {
        let data = res.data.data;
        this.page.total = data.total;
        let resultList = data.records;
        for (let i = 0; i < resultList.length; i++) {
          if (resultList[i].country != null && resultList[i].country != '') {
            let countryList = resultList[i].country.split(',');
            let set = new Set();
            countryList.forEach(c => {
              set.add(c);
            });
            resultList[i].country = Array.from(set).join(',');
          }
          resultList[i].reportDate = Moment(resultList[i].reportDate).format("yyyy-MM-DD");
        }
        this.data = resultList;
        this.loading = false;
      });
    },
    sortTableData(val) {
      let prop = val.prop;
      let orderBy = null;
      if (val.order === "descending") {
        orderBy = 'desc';
        //向上排序
      } else if (val.order === "ascending") {
        orderBy = 'asc';
        //不排序
      }
      if (orderBy != null) {
        this.sortList = [{name: prop, orderBy: orderBy}];
      } else {
        this.sortList = [];
      }
      this.onLoad();
    }
  }
}

</script>

